<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
    <div ref="statsDivRef" class="stats"></div>
    <div ref="threeRef"></div>
</template>

<script setup  lang="ts">
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { onMounted, ref } from 'vue'
import {
    Scene,
    PerspectiveCamera,
    WebGLRenderer,
    Color,
    AxesHelper,
    MeshLambertMaterial,
    PlaneGeometry,
    Mesh,
    BoxGeometry,
    SphereGeometry,
    SpotLight,
    AmbientLight
} from 'three'


/* ================================================================================================ */
//                                 ★ 变量
/* ================================================================================================ */
const threeRef = ref()
/* ================================================================================================ */
//                                ★ 函数
/* ================================================================================================ */
/** 初始化 */
const init = () => {
    /** 屏幕 */
    const scene = new Scene()
    /** 轴 */
    const axes = new AxesHelper(20)
    /** 屏幕-添加轴 */
    scene.add(axes);//屏幕添加-轴
    /** 渲染器 */
    const renderer = new WebGLRenderer({ antialias: true });
    /** 渲染器-设置颜色 */
    renderer.setClearColor(new Color(0xEEEEEE));
    /** 渲染器-设置尺寸 */
    renderer.setSize(window.innerWidth, window.innerHeight);

    /** 平面-尺寸 */
    const planeGeometry = new PlaneGeometry(50, 50);
    /** 平面-材质 */
    const planeMaterial = new MeshLambertMaterial({ color: 0xffaaff });
    /** 平面-建立 */
    const plane = new Mesh(planeGeometry, planeMaterial)
    plane.rotation.x = -0.5 * Math.PI
    plane.position.x = 0
    plane.position.y = 0;
    plane.position.z = 0;

    //地面接受阴影
    plane.receiveShadow = true;
    /** 屏幕-平面 */
    scene.add(plane)

    //盒子几何体
    const cubeGeometry = new BoxGeometry(10, 8, 8)
    const cubeMaterial = new MeshLambertMaterial({ color: 0xff0000 });
    const cube = new Mesh(cubeGeometry, cubeMaterial)
    //cube.rotation.x=-0.5*Math.PI
    //开启阴影
    cube.castShadow = true;
    cube.position.x = 14
    cube.position.y = 2;
    cube.position.z = 2;
    scene.add(cube)

    //球形几何体
    const sphereGeometry = new SphereGeometry(5, 10, 50);
    const sphereMaterial = new MeshLambertMaterial({ color: 0x77777ff })
    const sphere = new Mesh(sphereGeometry, sphereMaterial);
    sphere.castShadow = true
    sphere.position.x = 2
    sphere.position.y = 2
    sphere.position.z = 2
    scene.add(sphere)

    //光源效果
    let sptLight = new SpotLight(0xFFFFFF)
    sptLight.position.set(-40, 60, -40)
    //sptLight.shadow.camera.near=40,
    //sptLight.shadow.camera.far=-40,

    //开启阴影
    sptLight.castShadow = true
    scene.add(sptLight)
    const ambientLight = new AmbientLight(0xcccccc)
    scene.add(ambientLight)

    const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position)
    threeRef.value.appendChild(renderer.domElement)
    //渲染器开启阴影
    renderer.shadowMap.enabled = true
    renderer.render(scene, camera)

}

/* ================================================================================================ */
//                                ★ 钩子函数_挂载后
/* ================================================================================================ */
onMounted(() => {
    init();
})


</script>
<style scoped>
.stats {
    position: absolute;
    left: 0;
    top: 0;
}
</style>